
<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>The Blog-Magazine Website Template | Home :: w3layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<link href="css/search.css" rel="stylesheet" type="text/css" media="all" />
<!-- start nav -->
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.min.js"></script>
	<script>
		$(function() {
			var pull 		= $('#pull');
				menu 		= $('nav ul');
				menuHeight	= menu.height();

			$(pull).on('click', function(e) {
				e.preventDefault();
				menu.slideToggle();
			});

			$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 320 && menu.is(':hidden')) {
        			menu.removeAttr('style');
        		}
    		});
		});
	</script>
	
	<script type="text/javascript">
   function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'hidden')
          e.style.display = 'visible';
       else
          e.style.display = 'block';
   }
</script>
<!-- end nav -->
<script src="js/login.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
 <!----Calender -------->
  <link rel="stylesheet" href="css/clndr.css" type="text/css" />
  <script src="js/underscore-min.js"></script>
  <script src= "js/moment-2.2.1.js"></script>
  <script src="js/clndr.js"></script>
  <script src="js/site.js"></script>
  <!----End Calender -------->
 <script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
 <script>
	function show(){
  //alert("cheked the button - worked");
  document.getElementById('show_friends').style.display= 'block' ;
  }
  
  function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
 </script>
</head>

<body>
<div class="wrap">
	<div class="wrapper">
	
	<!-- start menu-->
	<div class="header">
		<div class="menu1">
		<!-- start navigation-->
		<nav class="clearfix">
			<ul class="clearfix">
				<li><a href="#">Home</a></li>
				<li><a href="#">How-to</a></li>
				<li><a href="#">Icons</a></li>
				<li><a href="#">Design</a></li>
				<li><a href="#">Web 2.0</a></li>
				<li><a href="#">Tools</a></li>	
			</ul>
			<a href="#" id="pull"><img src="images/nav-icon.png" /></a>
		</nav>
		<!-- end   navigation-->
		 </div>
		 <div class="header_right">
		 <div class="menu">
		 	<!-- start top-nav-->
			<div class="cssmenu">
					<ul>
					   <li><a href="#"><span>Home</span></a></li>
					   <li class="has-sub"><a href="#"><span>Store</span></a>
					   	<!-- IF you want sub-links remove this comment
					      <ul>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					      </ul>
					      --->
					   </li>
					   <li class="active"><a href="#"><span>Blog</span></a></li>
					   <li class="last"><a href="#"><span>Contact</span></a></li>
					   <div class="clear"></div>
					</ul>
				</div>
			<div class="clear"></div>
		</div>
    <div class="header_top_right">
		<!-- start search-->
		<div class="web_search">
		 <div class="search">
	        <form action="search.html">
	           <input type="text" value="Search" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search';}" class="text"/>
	            <input type="submit" value=""/>
	        </form>
	        <div class="close"><img src="images/cross.png" /></div>
	    </div>
	    <div class="srch"><button></button></div>
		<script type="text/javascript">
	         $('.search').hide();
	        $('button').click(function (){
	            $('.search').show();
	            $('.text').focus();
	        }
	        );
	        $('.close').click(function(){
	            $('.search').hide();
	        });
	    </script>
	    </div>
		<!-- start social icons -->
		<div class="social-icons">
	   		  	<ul>
			      <li class="icon_1"><a href="#" target="_blank"> </a></li>
			      <li class="icon_2"><a href="#" target="_blank"> </a></li>
			      <li class="icon_3"><a href="#" target="_blank"> </a></li>
			      <div class="clear"></div>
		     </ul>
	   	 </div>
		 
				
		
	   	 <!-- start login_box -->
			<div class="login_box">
	    		   <div id="loginContainer">
	                  <a id="loginButton" class=""><span></span></a>               
	                <div id="loginBox">                
	                    <form id="loginForm">
	                        <fieldset id="body">
	                            <fieldset>
	                                <label for="email">Email Address</label>
	                                <input type="text" name="email" id="email">
	                            </fieldset>
	                            <fieldset>
	                                <label for="password">Password</label>
	                                <input type="password" name="password" id="password">
	                            </fieldset>
	                            <input type="submit" id="login" value="Sign in">
	                            <label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>
	                        </fieldset>
	                        <span><a href="#">Forgot your password?</a></span>
	                    </form>
	                </div>
	              </div>
	           </div>
	         <div class="clear"></div>
	         </div>
	    </div>	
	   <div class="clear"></div>
	</div>
	<!-- end header -->
	
		 	
				
					
				</br>			
				<div class="split-left">	
				<div class="account_box">	
				<div class="accout-profile-header">
							<div class="accout-profile-header-left">
								<a href="#"><img src="images/profile-pic.png" alt="" /></a>
							</div>
							<div class="accout-profile-header-right">
								<h5>Jane W.Doe</h5>
								<span>Designer</span>
								<a href="#">Add friend!</a>
							</div>
							<div class="clear"> </div>
						</div>
						<div class="accout-profile-info">
							<p>Lorem ipsum dolor sit amet, sed do eiusmod tempor adipisicing elit, sed do eiusmod tempor incididunt ut labore sed do eiusmod tempor adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex </p>
						<ul>
								<li ><a href="javascript:hideshow(document.getElementById('show_friends'))" > <span >Friends</span><label>457</label></a></li>	
								<li><a href="#"> <span>Trips attended</span><label>200</label></a></li>
								<li><a href="#"> <span>Trips created</span><label>2324</label></a></li>
								<div class="clear"> </div>
								
						</ul>
						</div>
						
				</div>

				<div id="show_friends">
				
				<div class="payment-online-form-right" >
						
						<ul>
							<li>								
									<a href="#"><img src="images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;" /> Friend 1</a></li>
							<li>
									<a href="#"><img src="images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 2</a>
							</li>
							<li>
									<a href="#"><img src="images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;" /> Friend 3</a>
							</li>
							<li>
									<a href="#"><img src="images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 4</a>
							</li>
							<li>
									<a href="#"><img src="images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 5</a>
							</li>
							<li>
									<a href="#"><img src="images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 6</a>
							</li>
							
							
						</ul>
					</div>
					<div class="clear"> </div>
				</div>
				
				</div>
				</div>
				<div class="split-right">
				<div class="news-latter-box">
					<h4>News Letter</h4>
				</div>
				<div class="latest-news-grids">	
						
						<div class="news-latter-artical">
							<img class="news-latter-artical-pic" src="images/news-artical-pic.png" alt="" />
							<h4><a href="#">Trip1</a></h4>
							<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							<div class="news-latter-artical-related">
								<div class="news-latter-artical-related-left">
									<a href="#">August 8, 2013</a>
								</div>
								<div class="news-latter-artical-related-right">
									<a class="articl-readmore" href="#">Read More</a>
								</div>
								<div class="clear"> </div>
							</div>
						</div>
				</div>
				
				<div class="latest-news-grids">	
						
						<div class="news-latter-artical">
							<img class="news-latter-artical-pic" src="images/news-artical-pic.png" alt="" />
							<h4><a href="#">Trip2</a></h4>
							<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							<div class="news-latter-artical-related">
								<div class="news-latter-artical-related-left">
									<a href="#">August 8, 2013</a>
								</div>
								<div class="news-latter-artical-related-right">
									<a class="articl-readmore" href="#">Read More</a>
								</div>
								<div class="clear"> </div>
							</div>
						</div>
				</div>	
				<div class="latest-news-grids">	
						
						<div class="news-latter-artical">
							<img class="news-latter-artical-pic" src="images/news-artical-pic.png" alt="" />
							<h4><a href="#">Trip3</a></h4>
							<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							<div class="news-latter-artical-related">
								<div class="news-latter-artical-related-left">
									<a href="#">August 8, 2013</a>
								</div>
								<div class="news-latter-artical-related-right">
									<a class="articl-readmore" href="#">Read More</a>
								</div>
								<div class="clear"> </div>
							</div>
						</div>
				</div>
				</div>
					<div class="clear"> </div>
				
		
	
	
	<div class="content_bottom">
		<!-- start sidebar_left   ---->
		<div class="sidebar_left">
		
		
			
		</div>
		<!-- end sidebar_left   ---->
		<!-- start sidebar_right   ---->
			
		<!-- end sidebar_right   ---->
		</div>	
		<!-- end bottom_style   ---->
		<div class="clear"></div>
		


</body>
</html>
